<div class="tenways-guide navigation-guide-image">
     <div class="page-width">
         <div class="swiper-father">
            <div class="f-guide">
             {%- for block in section.blocks -%}
                  <div class="guide guide-{{ forloop.index0 }}">
                     <div class="navigation-image">
                         <div class="pc-image image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                         {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                       >
                         {%- if block.settings.image != blank -%}
                           <img
                             srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                               {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                               {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                               {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                               {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                               {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                               {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                               {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                             data-src="{{ block.settings.image | img_url: '1500x' }}"
                             sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                             alt="{{ block.settings.image.alt | escape }}"
                             loading="lazy"
                             class="loadlazy"
                             width="{{ block.settings.image.width }}"
                             height="{{ block.settings.image.height }}"
                           >
                         {%- else -%}
                           {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                         {%- endif -%}
                         </div>
                         <div class="hidden mb-image image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                         {% if block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
                       >
                         {%- if block.settings.image_mobile != blank -%}
                           <img
                             srcset="{%- if block.settings.image_mobile.width >= 165 -%}{{ block.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
                               {%- if block.settings.image_mobile.width >= 323 -%}{{ block.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                               {%- if block.settings.image_mobile.width >= 360 -%}{{ block.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                               {%- if block.settings.image_mobile.width >= 535 -%}{{ block.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
                               {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                               {%- if block.settings.image_mobile.width >= 1070 -%}{{ block.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
                               {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                               {{ block.settings.image_mobile | img_url: 'master' }} {{ block.settings.image_mobile.width }}w"
                             data-src="{{ block.settings.image_mobile | img_url: '1500x' }}"
                             sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                             alt="{{ block.settings.image_mobile.alt | escape }}"
                             loading="lazy"
                             class="loadlazy"
                             width="{{ block.settings.image_mobile.width }}"
                             height="{{ block.settings.image_mobile.height }}"
                           >
                         {%- else -%}
                           {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                         {%- endif -%}
                         </div>
                         <div class="top">
                           {% if block.settings.text %}
                             {{ block.settings.text }}
                           {% endif %} 
                           {% if block.settings.richtext %}
                           <div class="nav_top rte">{{ block.settings.richtext }}</div>
                          {% endif %}
                         </div>
                         <div class="buttom">
                             {%- if block.settings.button_label_2 != blank -%}
                            <div class="nav-bottom"> <a{% if block.settings.button_link_2 != blank %} href="{{ block.settings.button_link_2 }}"{% endif %} class="" {% if block.settings.button_link_2 == blank %} aria-disabled="true"{% endif %}> <div>{{ block.settings.button_label_2 | escape }}</div> <span>{% render 'icon-more' %}</span></a></div>
                           {%- endif -%}
                         </div>
                     </div>
                  </div>
             {%- endfor -%}
         </div>
         </div>
     </div>
 </div>
 
 
 {% schema %}
 {
   "name": "Navigation guide image",
   "class": "spaced-section spaced-section--full-width navigation-guide nav_g",
   "tag": "section",
   "settings": [
      
   ],
   "blocks": [
    {
     "type": "navigation",
     "name": "navigation",
     "settings": [
      {
         "type": "image_picker",
         "id": "image",
         "label": "Image"
       },
       {
         "type": "image_picker",
         "id": "image_mobile",
         "label": "Mobile image"
       },
      {
         "type": "text",
         "id": "text",
         "label": "Nav"
       },
       {
         "type": "richtext",
         "id": "richtext",
         "label": "Des"
       },
       {
         "type": "text",
         "id": "button_label_2",
         "default": "Button label",
         "label": "Button label",
         "info": "Button label"
       },
       {
         "type": "url",
         "id": "button_link_2",
         "label": "Button link"
       }
     ]
    }
   ],
   "presets": [
     {
       "name": "Navigation guide image"
     }
   ]
 }
 {% endschema %}
 